<template>
  <div>
    <!-- 查询人员 -->
    <div class="search box" style="margin-bottom: 20px">
      <el-form :inline="true">
        <el-form-item label="人员搜索：">
          <el-input placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn"
            ><i class="el-icon-search"></i>查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="result box">
      <div class="add" style="margin-bottom: 20px">
        <el-button type="warning" class="btn"
          ><i class="el-icon-circle-plus-outline"></i>新建</el-button
        >
      </div>
      <div class="resTable">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            width="80"
            type="index"
            :index="indexMethod"
            label="序号"
          ></el-table-column>
          <el-table-column
            width="260"
            prop="userName"
            label="人员名称"
          ></el-table-column>
          <el-table-column
            width="260"
            prop="regionName"
            label="归属区域"
          ></el-table-column>
          <el-table-column width="260" prop="role.roleName" label="角色">
          </el-table-column>
          <el-table-column width="260" prop="mobile" label="联系电话">
          </el-table-column>
          <el-table-column label="操作">
            <el-link :underline="false" type="primary">修改</el-link>
            <el-link :underline="false" type="danger">删除</el-link>
          </el-table-column>
        </el-table>
      </div>
      <div class="resPage">
        <span
          >共{{ totalCount }}条记录 第{{ pageInfo.pageIndex }}/{{
            totalPage
          }}页</span
        >
        <el-button-group>
          <el-button :disabled="pageInfo.pageIndex === 1">上一页</el-button>
          <el-button :disabled="pageInfo.pageIndex === Number(totalPage)"
            >下一页</el-button
          >
        </el-button-group>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserWorkerList } from '@/api/person'
export default {
  async created () {
    this.getUserWorkerList()
  },
  data () {
    return {
      tableData: [],
      // 传进去的时候把对象展开 这里的查询不需要表单验证
      pageInfo: {
        pageIndex: 1,
        pageSize: 10
      },
      userName: '',
      // 返回的值
      totalCount: '',
      totalPage: ''
    }
  },
  methods: {
    indexMethod (index) {
      return this.pageInfo.pageSize * (this.pageInfo.pageIndex - 1) + index + 1
    },
    async getUserWorkerList (data) {
      const res = await getUserWorkerList(data)
      this.tableData = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    }
  }
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  width: 100%;
  background-color: #fff;
}
.btn {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20);
  border: none;
}
.search {
  height: 64px;
  padding-left: 17px;
  .el-form {
    height: 100%;
    padding: 0;
    .el-form-item {
      margin: 10px 10px 0 0;
      ::v-deep .el-form-item__label {
        height: 36px;
      }
      ::v-deep .el-input__inner {
        height: 36px;
      }
      .el-button {
        background: #5f84ff !important;
      }
    }
  }
}
.result {
  // 可以删
  // height: 674px;
  padding: 20px 15px 19px 17px;
  display: flex;
  flex-direction: column;
  .resTable {
    ::v-deep th {
      background-color: rgb(243, 246, 251);
      color: #666;
      font-size: 14px;
      font-weight: normal;
    }
    ::v-deep .el-table__cell {
      height: 44px;
      padding: 0;
      border: 0;
    }
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border: 0px;
    }
    .el-link {
      margin-right: 20px;
    }
  }
  .resPage {
    display: flex;
    justify-content: space-between;
    margin: 32px 16px;
    span {
      font-size: 16px;
      color: #dbdfe5;
    }
    .el-button {
      width: 70px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      margin: 0 16px;
      border-radius: 2px;
      background-color: #d5ddf8;
      font-size: 13px;
    }
  }
}
</style>
